<template>
  <div class="tw-libimglinklistbox">
    <!---校园风光定制-->
    <template v-if="leftAndRightCustom">
      <template v-if="list.length > 0">
        <div class="tw-libimglinklist tw-grid xcustom xgd2 xmiddle"
          :class="{[`x${_uid}`]: true}">
          <div class="tw-grid-col">
            <a class="tw-libimglinklist-item xleft"
              :href="list[0] && list[0].href ?list[0].href: '#'"
              :target="list[0] &&list[0].target ?list[0].target :'_blank'">
              <div class="tw-libimglinklist-item-box"
                :class="{'xfit':imgFitParent}">
                <img :src="`${list[0].img}`"
                  attr="图片"
                  v-if="list[0].img" />

                <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                  attr="图片"
                  v-if="!list[0].img && imgDefault[0]" />
                <div class="tw-libimglinklist-item-tit xinner"
                  :class="{'xellipsis' :titleEllipsis}">
                  {{list[0] &&list[0].title ?list[0].title
                  : ''}}
                </div>
              </div>
            </a>
          </div>
          <div class="tw-grid-col">
            <div class="tw-grid xgd2 xcustom xmiddle">
              <div class="tw-grid-col">
                <a class="tw-libimglinklist-item xright"
                  :href="list[1] && list[1].href ? list[1].href : '#'"
                  :target="list[1] &&list[1].target? list[1].target: '_blank'">
                  <div class="tw-libimglinklist-item-box"
                    :class="{'xfit':imgFitParent}">
                    <img :src="`${list[1].img}`"
                      attr="图片"
                      v-if="list[1] &&list[1].img" />

                    <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                      attr="图片"
                      v-if="!(list[1] && list[1].img) && imgDefault[0]" />
                    <div class="tw-libimglinklist-item-tit xinner"
                      :class="{'xellipsis' :titleEllipsis}">
                      {{list[1] && list[1].title ?
                      list[1].title : ''}}
                    </div>
                  </div>
                </a>
              </div>
              <div class="tw-grid-col">
                <a class="tw-libimglinklist-item xright"
                  :href="list[2]&&list[2].href ? list[2].href : '#'"
                  :target="list[2]&&list[2].target? list[2].target: '_blank'">
                  <div class="tw-libimglinklist-item-box"
                    :class="{'xfit':imgFitParent}">
                    <img :src="`${list[2].img}`"
                      attr="图片"
                      v-if="list[2]&&list[2].img" />

                    <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                      attr="图片"
                      v-if="!(list[2]&&list[2].img)&& imgDefault[0]" />
                    <div class="tw-libimglinklist-item-tit xinner"
                      :class="{'xellipsis' :titleEllipsis}">
                      {{list[2]&&list[2].title}}
                    </div>
                  </div>
                </a>
              </div>
              <div class="tw-grid-col">
                <a class="tw-libimglinklist-item xright"
                  :href="list[3]&&list[3].href ? list[3].href : '#'"
                  :target="list[3]&&list[3].target? list[3].target: '_blank'">
                  <div class="tw-libimglinklist-item-box"
                    :class="{'xfit':imgFitParent}">
                    <img :src="`${list[3].img}`"
                      attr="图片"
                      v-if="list[3]&&list[3].img" />

                    <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                      attr="图片"
                      v-if="!(list[3]&&list[3].img)&& imgDefault[0]" />
                    <div class="tw-libimglinklist-item-tit xinner"
                      :class="{'xellipsis' :titleEllipsis}">
                      {{list[3]&&list[3].title}}
                    </div>
                  </div>
                </a>
              </div>
              <div class="tw-grid-col">
                <a class="tw-libimglinklist-item xright"
                  :href="list[4]&&list[4].href ? list[4].href : '#'"
                  :target="list[4]&&list[4].target? list[4].target: '_blank'">
                  <div class="tw-libimglinklist-item-box"
                    :class="{'xfit':imgFitParent}">
                    <img :src="`${list[4].img}`"
                      attr="图片"
                      v-if="list[4]&&list[4].img" />

                    <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                      attr="图片"
                      v-if="!(list[4]&&list[4].img)&& imgDefault[0]" />
                    <div class="tw-libimglinklist-item-tit xinner"
                      :class="{'xellipsis' :titleEllipsis}">
                      {{list[4]&&list[4].title}}
                    </div>
                  </div>
                </a>
              </div>

            </div>
          </div>
        </div>
      </template>
      <tw-lib-nodata v-show="list.length===0" />
    </template>
    <!---校园风光定制-->

    <template v-else>
      <div class="tw-libimglinklist tw-grid"
        :class="[{'xgd1':gridLayout === 'one','xgd2':gridLayout === 'two','xgd3':gridLayout==='three', 'xgd4':gridLayout === 'four', 'xgd5':gridLayout === 'five',[`x${_uid}`]: true}, gridSpacing]">
        <template v-if="list.length > 0">
          <div class="tw-grid-col"
            v-for="(item, index) in list"
            :key="index">
            <a class="tw-libimglinklist-item"
              :href="item.href"
              :target="item.target">
              <div class="tw-libimglinklist-item-box"
                :class="{'xfit':imgFitParent}">
                <img :src="`${item.img}`"
                  attr="图片"
                  v-if="item.img" />

                <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                  attr="图片"
                  v-if="!item.img && imgDefault[0]" />
                <!--图片标题在图片下面-->
                <div class="tw-libimglinklist-item-tit xinner"
                  :class="{'xellipsis' :titleEllipsis}"
                  v-if="hasTitle && titlePosition === 'inner'"
                  :title="item.title">
                  {{item.title}}
                </div>
                <!--/图片标题在图片下面-->
              </div>

              <!--图片标题在图片下面-->
              <div class="tw-libimglinklist-item-tit"
                :class="{'xellipsis' :titleEllipsis}"
                v-if="hasTitle && titlePosition === 'outer'"
                :title="item.title">
                {{item.title}}
              </div>
              <!--/图片标题在图片下面-->

            </a>
            <template v-if="hasClassfiy">
              <a class="tw-libimglinklist-item-classfiy"
                v-if="item.classfiyHref"
                :href="item.classfiyHref"
                :target="item.classfiyTarget? item.classfiyTarget : '_blank'">
                {{item.classfiy}}
              </a>

              <div class="tw-libimglinklist-item-classfiy"
                v-else>
                {{item.classfiy}}
              </div>
            </template>

          </div>
        </template>
        <tw-lib-nodata v-show="list.length===0" />
      </div>
    </template>
  </div>

</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import nodata from '../tw-lib-base/no-data/no-data'

export default {
  name: 'imglink-list',

  mixins: [style, nodata],

  props,

  data() {
    return {
      list: [],
      hasImglist: [],
      coverIcon: ''
    }
  },

  computed: {
    style() {
      return {
        imgBg: this.imgBg,
        imgHeight: this.imgHeight,
        imgMarginBottom: this.imgMarginBottom,
        imgObjectFit: this.imgObjectFit,
        imgborderRadius: this.imgborderRadius,
        imgborderRadiusPosition: this.imgborderRadiusPosition,
        titlePosition: this.titlePosition,
        titleColor: this.titleColor,
        titleHoverColor: this.titleHoverColor,
        titleFontSize: this.titleFontSize,
        isTitleBold: this.isTitleBold,
        titleHeight: this.titleHeight,
        titleLineHeight: this.titleLineHeight,
        titlePaddingLeftRight: this.titlePaddingLeftRight,
        titleBgColor: this.titleBgColor,
        titleAlign: this.titleAlign,
        titleEllipsisNum: this.titleEllipsisNum,
        classfiyColor: this.classfiyColor,
        isClassfiyBold: this.isClassfiyBold,
        classfiyBgColor: this.classfiyBgColor,
        classfiyHoverColor: this.classfiyHoverColor,
        classfiyFontSize: this.classfiyFontSize,
        classfiyAlign: this.classfiyAlign,
        classfiyLineHeight: this.classfiyLineHeight,
        classfiyPaddingBottom: this.classfiyPaddingBottom,
        classfiyPaddingLeft: this.classfiyPaddingLeft,
        classfiyPaddingRight: this.classfiyPaddingRight,
        classfiyPaddingTop: this.classfiyPaddingTop,
        classfiyRadiusPosition: this.classfiyRadiusPosition,
        classfiyborderRadius: this.classfiyborderRadius
      }
    }
  },

  methods: {
    setStyle() {
      let style = `
        ::root.tw-libimglinklist .tw-libimglinklist-item-box {
          height: ${this.imgHeight};
          background-color: ${this.imgBg};
          margin-bottom: ${this.imgMarginBottom};
        }

        ::root.tw-libimglinklist .tw-libimglinklist-item-box img{
          object-fit : ${this.imgObjectFit};
        }
      `

      if (this.hasTitle) {
        style += `
          ::root.tw-libimglinklist .tw-libimglinklist-item-tit{
          color : ${this.titleColor};
          font-size: ${this.titleFontSize};
          font-weight: ${this.isTitleBold ? '700' : '400'};
          height: ${this.titleHeight};
          line-height: ${this.titleLineHeight};
          padding: 0 ${this.titlePaddingLeftRight};
          background-color: ${this.titleBgColor};
          text-align: ${this.titleAlign};
          }

          ::root.tw-libimglinklist .tw-libimglinklist-item-tit:hover {
            color: ${this.titleHoverColor};
          }
        `
      }

      if (this.titleEllipsis) {
        style += `
         ::root.tw-libimglinklist .tw-libimglinklist-item-tit.xellipsis{
          -webkit-line-clamp: ${this.titleEllipsisNum};
        }
        `
      }
      if (this.hasClassfiy) {
        style += `
         ::root.tw-libimglinklist .tw-libimglinklist-item-classfiy{
          padding: ${this.classfiyPaddingTop} ${this.classfiyPaddingRight} ${
          this.classfiyPaddingBottom
        } ${this.classfiyPaddingLeft};
          color : ${this.classfiyColor};
          font-size: ${this.classfiyFontSize};
          font-weight: ${this.isClassfiyBold ? '700' : '400'};
          line-height: ${this.classfiyLineHeight};
          background-color: ${this.classfiyBgColor};
          text-align: ${this.classfiyAlign};
        }

        ::root.tw-libimglinklist .tw-libimglinklist-item-classfiy:hover {
            color: ${this.classfiyHoverColor};
          }
        `
        if (this.classfiyRadiusPosition.includes(0)) {
          style += `
              ::root.tw-libimglinklist .tw-libimglinklist-item-classfiy {
               border-top-left-radius:${this.classfiyborderRadius}
              }
            `
        }

        if (this.classfiyRadiusPosition.includes(1)) {
          style += `
              ::root.tw-libimglinklist .tw-libimglinklist-item-classfiy {
               border-bottom-left-radius:${this.classfiyborderRadius}
              }
            `
        }

        if (this.classfiyRadiusPosition.includes(2)) {
          style += `
              ::root.tw-libimglinklist .tw-libimglinklist-item-classfiy {
               border-top-right-radius:${this.classfiyborderRadius}
              }
            `
        }

        if (this.classfiyRadiusPosition.includes(3)) {
          style += `
              ::root.tw-libimglinklist .tw-libimglinklist-item-classfiy {
               border-bottom-right-radius:${this.classfiyborderRadius}
              }
            `
        }
      }

      if (this.imgborderRadiusPosition.includes(0)) {
        style += `
          ::root.tw-libimglinklist .tw-libimglinklist-item-box {
               border-top-left-radius:${this.imgborderRadius}
              }

              ::root.tw-libimglinklist .tw-libimglinklist-item-box.xfit img{
                border-top-left-radius:${this.imgborderRadius}
              }
            `
      }

      if (this.imgborderRadiusPosition.includes(1)) {
        style += `
          ::root.tw-libimglinklist .tw-libimglinklist-item-box {
               border-bottom-left-radius:${this.imgborderRadius}
              }

               ::root.tw-libimglinklist .tw-libimglinklist-item-box.xfit img{
                border-bottom-left-radius:${this.imgborderRadius}
              }
            `
      }

      if (this.imgborderRadiusPosition.includes(2)) {
        style += `
          ::root.tw-libimglinklist .tw-libimglinklist-item-box {
               border-top-right-radius:${this.imgborderRadius}
              }

               ::root.tw-libimglinklist .tw-libimglinklist-item-box.xfit img{
                 border-top-right-radius:${this.imgborderRadius}
              }
            `
      }

      if (this.imgborderRadiusPosition.includes(3)) {
        style += `
          ::root.tw-libimglinklist .tw-libimglinklist-item-box {
               border-bottom-right-radius:${this.imgborderRadius}
              }

               ::root.tw-libimglinklist .tw-libimglinklist-item-box.xfit img{
                border-bottom-right-radius:${this.imgborderRadius}
              }
            `
      }

      this.addStyle(style)
    },
    /***
     * 初始化数据
     */
    initData() {
      if (this.dataIsFromPortal) {
        this.getData()
      } else {
        this.list = this.lists
      }
    },

    /***
     * 从接口获取数据
     */
    getData() {
      let params = {
        condition: {
          siteId: this.$siteConfig.siteId,
          pageId: this.moudleId,
          status: '1'
        },
        orderList: ['createTime desc', 'lastModifyTime asc'],
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      window.axios
        .post(
          `${
            window.$twApp.gateway
          }/unified-portal/document/getDocumentListBySiteId`,
          params
        )
        .then(resp => {
          this.list = []
          this.hasImglist = []
          if (
            resp.data.serverResult.resultCode &&
            resp.data.result &&
            resp.data.result.list
          ) {
            this.hasImglist = resp.data.result.list.filter(item => {
              return item.coverIcon !== ''
            })
            if (this.dataHasImg) {
              this.list = this.hasImglist.map((item, idx) => {
                return {
                  documentId: item.documentId,
                  title: item.title,
                  createTime: item.createTime,
                  date: window.$ui.dateFormat(
                    item.lastModifyTime,
                    'yyyy-mm-dd'
                  ),
                  img: `${window.$twApp.gateway}/unified-portal/${
                    item.coverIcon
                  }`,
                  pageId: item.pageId,
                  publish: item.publish,
                  type: item.type,
                  status: item.status,
                  source: item.source,
                  href: item.link
                    ? item.link
                    : this.detaillUrl
                    ? `${this.detaillUrl}?pageId=${item.pageId}&documentId=${
                        item.documentId
                      }`
                    : '',
                  target: '_blank'
                }
              })
            } else {
              this.list = resp.data.result.list.map((item, idx) => {
                return {
                  documentId: item.documentId,
                  title: item.title,
                  createTime: item.createTime,
                  date: window.$ui.dateFormat(
                    item.lastModifyTime,
                    'yyyy-mm-dd'
                  ),
                  img: item.coverIcon
                    ? `${window.$twApp.gateway}/unified-portal/${
                        item.coverIcon
                      }`
                    : '',
                  pageId: item.pageId,
                  publish: item.publish,
                  type: item.type,
                  status: item.status,
                  source: item.source,
                  href: item.link
                    ? item.link
                    : this.detaillUrl
                    ? `${this.detaillUrl}?pageId=${item.pageId}&documentId=${
                        item.documentId
                      }`
                    : '',
                  target: '_blank'
                }
              })
            }

            let total = resp.data.result.total
            this.$emit('update:total', total)
          }
        })
        .catch(e => {
          this.$ui.msg({
            type: 'error',
            message: '获取列表失败'
          })
        })
    }
  },

  watch: {
    dataIsFromPortal: {
      deep: true,
      handler() {
        this.initData()
      }
    },
    moudleId: {
      deep: true,
      handler() {
        this.getData()
      }
    },

    pageNo: {
      deep: true,
      handler() {
        this.getData()
      }
    },

    pageSize: {
      deep: true,
      handler() {
        this.getData()
      }
    },
    lists: {
      deep: true,
      handler() {
        this.list = this.lists
      }
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
